<template>
	<view class="">
<!-- <image style="position: fixed;top: 50%;left: 50%;width: 50vw;height: 50vh;transform: translate(-50%,-50%);z-index: 9999;" src="https://wimg.588ku.com/gif620/20/09/06/d82a22dabfc40e1c87d432330e39ab07.gif" mode=""></image> -->
<gameBasics v-if="acceptStatus" />
		<view class="bossCard">
			

			<view class="team_information">
				<image :src="gameChall[0].teamList.pic" mode="aspectFill"></image>
				<text>{{gameChall[0].teamList.title}}</text>
			</view>

			<view class="time">
				<flipcountdown  @getTimeOut="getTimeOut" :startDate="startDate" :valueTime="game_config.time" :propsType="type==2?2:1"
					:endTime="endTime" value="00:00:00" :autoplay="autoplay" ref="time" zoom=".8"/>
					
			</view>
      <view class="" style="height: calc(120vmin / 7.5);display: flex;line-height: calc(120vmin / 7.5);text-align: center;">
      	<view v-if="power&&(type!=2||!autoplay)" class="game_btn"  @click="setAutoplay">
      		<view class="">
      		</view>
      		{{gameChall[0].team_id!=userPeople.teamId?'准备中...':autoplay?'结束':'开始'}}
      	</view>
      	<view v-else class="" style="font-size: calc(28vmin / 7.5);color: #333333;margin: auto;">
      		{{autoplay?`${gameChall[0].teamList.title} 正在进行游戏`:`等待 ${gameChall[0].teamList.title} 队长开始`}}
      		
      	</view>
      </view>
			
 



		</view>

		<u-popup :show="remindShow" mode="center" :safeAreaInsetBottom="false"  round="12rpx">
			<view style="padding: 0 50upx;width: calc(624vmin / 7.5);position: relative;">
				<view class=""
					style="font-size: calc(36vmin / 7.5);color: #333333;text-align: center;font-weight: 700;margin: calc(110vmin / 7.5) auto;">
					 防误触提示：是否确认结束？
				</view>
				<view class="" style="display: flex;justify-content: space-between;margin-bottom: calc(30vmin / 7.5);">
					<view class="anew_btn" @click="submit">
						YES
					</view>
				
<!-- 					<view class="anew_btn" @click="cancel">
						NO
					</view> -->
				</view>
				<view class="timeText">
					{{num}}s 后自动关闭
				</view>
			</view>
		</u-popup>
			<gameLoading/>
	</view>
</template>

<script>
	import flipcountdown from '@/components/flipcountdown/flipcountdown.vue'
	export default {
		components: {
			flipcountdown
		},
		data() {
			return {
				autoplay: false,
				gameData: {},
				gameChall: {},
				teamList: [],
				game_config: {},
				userPeople: {},
				endTime: 0,
				startDate: 0,
				type: 0,
				acceptStatus: true,
				remindShow: false,
				number:0,
				power:false,
				num:0
			}
		},
		onShow() {
			this.userData = uni.getStorageSync("userData")

		},
		onUnload() {
			this.acceptStatus = false
			// uni.$off('onMessage') 
		},
		watch: {
			endTime() {
				if(this.$refs.time) this.$refs.time.reset()
				if (this.gameChall[0].time == 0) return;
				this.startDate = (this.gameData.current_time - this.gameChall[0].time- (+this
							.gameChall[0].time_del || 0) + (+this.gameChall[0].time_add || 0)) * 10
				this.autoplay = true

			},
			gameChall(a,b){
				if(a.team_id!=b.team_id) this.$refs.time.reset()
			}
		},

		mounted() {	
			this.$refs.time.reset()
			uni.$on('onMessage', (res) => {
				if(!this.acceptStatus) return;
							this.$nextTick(()=>{
								this.$store.commit('switchGame', {
									code: false
								})
							})
					if (res.data.code != 202) return;
					
					this.power=res.data.userPeople.power||(res.data.userPeople.activ_list&&res.data.userPeople.cap_zt==2)
					this.game_config = res.data.game_config
					this.type = this.game_config.type
					this.gameChall = res.data.game_chall
					this.gameData = res.data.game

					this.teamList = res.data.team
					this.userPeople = res.data.userPeople
					this.endTime = this.game_config.time + (+this.gameChall[0].time) - (+this
						.gameChall[0].time_del || 0) + (+this.gameChall[0].time_add || 0)
					if (this.gameChall[0].time == 0) {
						this.autoplay = false
					}
					this.gameChall.forEach(item => {

						if (item.team_id == this.userPeople.teamId) {
							if (item.time != 0) {
								this.autoplay = true
							}

						}
					})

			})
			let game_id = uni.getStorageSync("gameId")
			let userData = uni.getStorageSync("userData")
		if(!this.$ws.socketTask) return this.$ws.init();
			this.$ws.socketTask.send({
				data: JSON.stringify({
					game_id,
					user_id: userData.id
				}),
				async success() {
					console.log("消息发送成功")
				}
			});

		},
		methods: {

			getTimeOut() {
				if(!this.acceptStatus) return;
				let time = ~~(Math.round(new Date())/1000);
				let number=time-this.gameChall[0].time
				
				// if(this.gameChall[0].team_id!=this.userPeople.teamId) return;//不是你的事 别瞎操心
				if (this.type == 2) {
					uni.redirectTo({
						url: '/pages/gameTemplate/A3'
					})

				} else {
					if (this.autoplay || this.gameChall[0].time == 0) return;
					this.number=number+2-(+this
							.gameChall[0].time_del || 0) + (+this.gameChall[0].time_add || 0)
					this.remindShow = true
					this.num=5
						
					let time =setInterval(()=>{
						if(this.num<=0){
							clearInterval(time)
							this.remindShow=false
						}else{
							this.num-=1
						}
						
						
					},1000)
					this.autoplay = true
					
					// uni.showModal({
					// 	title: '提示',
					// 	content: `当前成绩${number}s,您确定要结束计时吗？`,
					// 	success: function(res) {
					// 		if (res.confirm) {

					// 			// uni.redirectTo({
					// 			// 	url:'../preliminarySummary'
					// 			// })
					// 		} else if (res.cancel) {
					// 			that.autoplay = true
					// 		}
					// 	}
					// });
				}


			},
			submit() {
				let data = {
					game_id: this.gameData.id,
					activ_id: this.game_config.activ_id,
					team_id: this.userPeople.teamId,
					number:this.number
				}
	
				this.$myRuquestWs('home/game/game_end', data).then(res => {
					this.remindShow=false
					this.$refs.time.reset()
				})
			},
			// cancel() {
			// 	this.remindShow = false
			// 	// this.autoplay = true
			// },
			setAutoplay() {
				if (!(this.type != 2 || !this.autoplay)) return
				if (!this.userPeople.power) return;
				this.$util.knock()
				if (this.gameChall[0].team_id != this.userPeople.teamId) return uni.showToast({
					title: '请等待其他队伍完成挑战！',
					icon: 'none'
				});
				if (!this.autoplay) {
					let data = {
						game_id: this.gameData.id,
						activ_id: this.game_config.activ_id,
						team_id: this.userPeople.teamId
					}
					this.$myRuquestWs('home/game/team_go', data).then(res => {
						uni.showToast({
							title: '开始计时',
							icon: 'none'
						});
						this.autoplay = true
					})
				} else {
					this.autoplay = false
				}


			}
		}
	}
</script>

<style lang="scss" scoped>
	.game_btn {
		padding: 0 calc(70vmin / 7.5);
	}

	.bossCard {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		height: 100vh;

		.time {
			display: flex;
			justify-content: center;
			// transform: scale(1.2);

			view {
				// transform: scale(1.1);
			}
		}
	}

	.team_information {
		display: flex;
		justify-content: center;
		align-items: center;
		image {
			width: calc(90vmin / 7.5);
			height: calc(90vmin / 7.5);
			margin-right: calc(20vmin / 7.5);
		}

		font-size: calc(50vmin / 7.5);
		color: #333333;
		font-weight: 700;
	}
.timeText{
	position: absolute;
	top: calc(20vmin / 7.5);
	left: calc(20vmin / 7.5);
	font-size: calc(24vmin / 7.5);
	padding: calc(4vmin / 7.5) calc(10vmin / 7.5);
		
		height: calc(40vmin / 7.5);
		background-color: rgba(0, 0, 0, .23);
		border-radius: calc(40vmin / 7.5);
		line-height: calc(40vmin / 7.5);
		text-align: center;
		color: #ffffff;
	
}
	.anew_btn {
		width: calc(334vmin / 7.5);
		height: calc(98vmin / 7.5);
		line-height: calc(98vmin / 7.5);
		border-radius: calc(49vmin / 7.5);
		text-align: center;
		background-color: #FED194;
		color: #AC7D3D;
		font-size: calc(34vmin / 7.5);
		margin: auto;
	}
</style>
